import "./style.scss";
import videoPlay from "../../images/vedioPlay.png";
import SubjectInfo from "pages/ruijing/Statements/components/SubjectInfo";
import AddDeptForm from "pages/ruijing/Statements/components/AddDept";
import ZenModal from "@root/components/zenUi/ZenModal/ZenModal";
function video(props) {

    //初始化插件入参
    const {} = props;

    //初始化插件状态值及状态更新方法
    const [videoStatus, updateVideoStatus] = usePartState({
        videoSrc:["https://images.rjmart.cn/video/cglc.mp4","https://images.rjmart.cn/video/spys.mp4","https://images.rjmart.cn/video/jsbx.mp4","https://images.rjmart.cn/video/splc.mp4","https://images.rjmart.cn/video/jjlc.mp4","https://images.rjmart.cn/video/spysyrk.mp4","https://images.rjmart.cn/video/zhsjyzc.mp4"],
        videoName:["采购流程","商品验收","结算报销","PI审批","竞价流程","商品验收与入库","账号收集与注册"],
        selectedVideo:-1,
        isShowModal:false,
        orgId:Uts.getCookie("orgId"),
        search:$state.params.hasOwnProperty("vSearch")?$state.params.vSearch:""
    })

    //更新视图数据 私有的方法前缀用_
    function _updateData(value) {
        let newValue = { ...videoStatus, ...value };
        console.log(newValue);
        updateVideoStatus(newValue);
    }

    //更新视图数据方法外部接口
    function updateFunctions(prams1,params2){
        _updateData(
            (videoStatus.status1 = prams1),
            (videoStatus.status2 = prams2)
        )
    }

    //弹窗播放video
    function videoPaly(index,src,name) {
        console.log("showModal",index,src,name);
        function closeModal(value) {
            console.log("run closeModal", value);
            modal.hide();
        }

        function Content(src) {
            console.log("content",src);
            return (
                <video width="100%" className="zen_p-t-20" controls autoPlay={true}>
                    <source src={src} type="video/mp4"/>
                </video>
            );
        }
        let options = {
            header: name,
            // footer: "test footer",
            content: Content(src),
            size: "large",
            //cbList: [AddDeptForm.doSubmit],
            close: closeModal,
            hideFooter:true
        };
        let modal = ZenModal.loadModal(options);
        modal.show();
    }

    //渲染每个播放单元
    function videoUnit(src,videoIndex,name,search){
        if(videoIndex>=5){
            if(videoStatus.orgId==4){
                return <div>
                    {name.indexOf(search)>-1?<div className="video_unit" key={videoIndex}>
                        <video width="360" height="260">
                            <source src={src} type="video/mp4"/>
                        </video>
                        <div className="video_mask" onClick={()=>videoPaly(videoIndex,src,name)}>
                            <img src={videoPlay}/>
                            <br/>
                            <span>{videoStatus.videoName[videoIndex]}</span>
                        </div>
                    </div>:""}
                </div>
            }else{
                return ""
            }
        }else{
            return <div>
            {name.indexOf(search)>-1?<div className="video_unit" key={videoIndex}>
                    <video width="360" height="260">
                        <source src={src} type="video/mp4"/>
                    </video>
                    <div className="video_mask" onClick={()=>videoPaly(videoIndex,src,name)}>
                        <img src={videoPlay}/>
                        <br/>
                        <span>{videoStatus.videoName[videoIndex]}</span>
                    </div>
                </div>:""}
            </div>
        }
    }

    function checkSearch(){
        let searchInput = $state.params.vSearch;
        console.log("checkSearch",searchInput,videoStatus.search)
        if(searchInput!=videoStatus.search&&searchInput!=undefined){
            _updateData(
                (videoStatus.search = searchInput)
            )
        }
    }

    //componentOnMount
    React.useEffect(() => {
        console.log("refresh view");
        console.log(videoStatus);
    },[]);

    checkSearch();
    const allVideoName = videoStatus.videoName.join("|")
    console.log("allVideoName",allVideoName)

    return (
        <div className="video_wrap">
            <div className="zen_w-1200 zen_center zen_p-t-30 video_content">
                {(videoStatus.search==""||allVideoName.indexOf(videoStatus.search)>-1)?videoStatus.videoSrc.map((item,index) =>
                    (
                        videoUnit(item,index,videoStatus.videoName[index],videoStatus.search)
                    )
                ):<div className="zen_p-10 zen_bg-white zen_text zen_t-c zen_fs-20 zen_m-r-30" style={{minHeight:"700px"}}>
                    <h3 style={{lineHeight:"700px"}}>暂未找到相关视频哦～</h3>
                </div>}
            </div>
        </div>
    )
}

export default video;